<template>
  <div class="work" v-if="finished">
    <div class="work-list">
      <template v-for="(x, y) in list" :key="y">
        <div class="work-item">
          <div class="subtitle">
            <h2>{{ x.title }}</h2>
            <div @click="more(x)">更多</div>
          </div>
          <div class="icon-list">
            <template v-if="y == 3">
              <div v-for="(a, b) in x.list" :key="b" @click="goPath(a)">
                <div :class="'iconfont icon-' + a.icon" :style="{ backgroundColor: x.bg }"></div>
                <div class="word">{{ a.title }}</div>
              </div>
            </template>
            <template v-else>
              <div v-for="(a, b) in firstThree(x.list)" :key="b" @click="goPath(a)">
                <div :class="'iconfont icon-' + a.icon" :style="{ backgroundColor: x.bg }"></div>
                <div class="word">{{ a.title }}</div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
    <div class="web-list" v-if="webList.length > 0">
      <h2>常用网站</h2>
      <div class="web-type">
        <div v-for="(x, y) in webList" :key="y" @click="selectWebType(y)" :class="webType == y ? 'active' : ''">
          {{ x.title }}
        </div>
      </div>
      <div class="web-content">
        <div v-for="(x, y) in webList[webType].children" :key="y" @click="goToLink(x)">
          {{ x.title }}
        </div>
      </div>
    </div>
    <el-dialog title="更多列表" v-model="isMore" width="800px">
      <div class="icon-list">
        <div v-for="(a, b) in moreDetail.list" :key="b" @click="goPath(a)">
          <div :class="'iconfont icon-' + a.icon" :style="{ backgroundColor: a.color }" style="color: #fff;"></div>
          <div class="word">{{ a.title }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import system from '@/utils/system';
import { queryData } from '@/apis/mysql'
import global from '@/utils/global';
const finished = ref(false)
const list = [
  {
    title: '工作项目',
    bg: '#97c671',
    list: []
  },
  {
    title: '个人项目',
    bg: '#28a8c1',
    list: []
  },
  {
    title: '常用目录',
    bg: '#ab2960',
    list: []
  },
  {
    title: '软件列表',
    bg: '#eb988a',
    list: []
  }
]

const webList = ref([])
const webType = ref(0)
const isMore = ref(false)
const moreDetail = ref(null)

onMounted(() => {
  getList()
  setTimeout(() => {
    getSorts()
    getWebList()
  }, 500)
})

function firstThree(list) {
  let arr = []
  arr = list.slice(0, 3)
  return arr
}

function more(x) {
  isMore.value = true
  moreDetail.value = x
  // console.log(x)
}

function goPath(x) {
  system.openFile(x.start)
}

function goToLink(x) {
  system.openWeb(x.href)
}

function getList() {
  queryData({
    table: 'items',
    data: {},
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    list[0].list = res.data.filter(x => x.type == '1')
    list[1].list = res.data.filter(x => x.type == '0')
    finished.value = true
  })
}

function getSorts() {
  finished.value = false
  queryData({
    table: 'softs',
    data: {},
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    const arr1 = res.data.filter(x => x.type == '0')
    const arr2 = res.data.filter(x => x.type == '1')
    list[2].list = arr1
    list[3].list = arr2
    finished.value = true
  })
}

function selectWebType(y) {
  webType.value = y
}

function getWebList() {
  finished.value = false
  queryData({
    table: 'links',
    data: {},
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    const arr = global.arrayToTree(res.data, "pid", 0)
    arr.map(x => {
      x.children = global.reSort(x.children, 'sort')
    })
    webList.value = arr
  })
}

</script>
<style scoped lang="scss">
.work {
  width: 100%;

  .work-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;

    >div {
      width: 33%;
    }

    >div:last-child {
      width: 100%;
    }

    .subtitle {
      display: flex;
      margin: 20px;
      justify-content: space-between;
      align-items: end;

      >div {
        cursor: pointer;
      }
    }
  }

  .web-list {
    h2 {
      margin: 20px;
    }

    .web-type {
      // width: 722px;
      display: flex;
      flex-wrap: wrap;
      margin: 10px;
      border: 1px solid #fff;

      >div {
        width: 120px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        text-align: center;
      }

      .active {
        background-color: #1889fa;
        color: #fff;
      }
    }

    .web-content {
      display: flex;
      flex-wrap: wrap;

      >div {
        width: 120px;
        margin: 10px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
